<template>
    <div class="bg4"></div>
    <section class="bg2">
        <div class="bg3">
            <div>
                <input type="text" placeholder="房型名称" class="kuangjia">
                <el-button @click="onSubmit" type="primary" class="chaxun">查询</el-button>
                <el-button type="primary" class="piliang">批量删除</el-button>
                <el-button @click="add" type="primary" class="xinzeng">新增房型</el-button>
            </div>
            <el-table
        :data="tableData"
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%">
        <el-table-column  type="selection" width="55" />
        <el-table-column  prop="date" label="房品名称" />
        <el-table-column  prop="name" label="售价（元）"/>
        <el-table-column  prop="address" label="房间数量"/>
        <el-table-column fixed="right" label="操作">
            <template #default>
                <el-button link type="primary" size="small" @click="onEdit">编辑</el-button>
                <el-button @click="del" link type="primary" size="small">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="editVisible" title="编辑房号">
        <el-form :model="editData">
          <el-form-item label="选择房型" :label-width="formLabelWidth">
                <el-select v-model="editData.type" placeholder="选择类型">
                    <el-option label="途选大床房" value="0" />
                    <el-option label="途享大床房" value="1" />
                    <el-option label="途奢大床房" value="2" />
                    <el-option label="途奢双床房" value="3" />
                    <el-option label="途享家庭房" value="4" />

                </el-select>
            </el-form-item>
            <el-form-item label="房号" :label-width="formLabelWidth">
                <el-input v-model="editData.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="editData.beizhu" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="edit">修改</el-button>
            </span>
        </template>
    </el-dialog>
        </div>

        </section>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import type { TableColumnCtx } from 'element-plus'
  const router=useRouter()
  function add(){
    router.push('../home/tianjiafangxing')
  }
  const onSubmit = () => {
    console.log('搜索')
}
const onEdit = () => {
    editVisible.value=true;
}
  const edit = () => {
    editVisible.value=false;
    console.log('编辑')

}



const del = () => {
    console.log('删除')
}
const formLabelWidth=ref(80);
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const editVisible=ref(false);
const addVisible=ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const editData=({
    type:'0',
    name:'',
    beizhu:''
})
const addData=({
    type:'0',
    name:'',
    beizhu:''
})
  interface User {
    date: string
    name: string
    address: string
  }
  
  const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.address
  }
  
  const tableData: User[] = [
    {
      date: '途选大床房',
      name: '￥330.00',
      address: '5',
    },
    {
        date: '途选大床房',
      name: '￥330.00',
      address: '5',
    },
    {
        date: '途选大床房',
      name: '￥330.00',
      address: '5',
    },
    {
        date: '途选大床房',
      name: '￥330.00',
      address: '5',
    },
    {
      date: '途选大床房',
      name: '￥330.00',
      address: '5',
    }
  ]
  </script>
  <style lang="less" scoped>
  

.bg2{
    background-color: rgb(242, 242, 242);
    width: 100%;
    height: 800px;
}
.bg3{
    width: 95%;
    height: 700px;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
}
.bg4{
    width: 100%;
    height: 20px;
    background-color:rgb(242, 242, 242);
}
.kuangjia{
    width: 240px;
    height: 30px;
    border-radius: 5px;
    margin: 30px;
    border: 1px solid rgb(221, 220, 220);
}
.chaxun{
    margin-right: 620px;
}
.piliang{
    margin-right: 20px;
}
.xinzeng{
    color: white;
}
.demo-pagination-block{
  margin-top: 50px;
}
</style>